<script setup>
import EchartsView from "../../components/EchartsView.vue";
</script>

<template>
  <div class="container tok_info ">
    <div class="row box_card">
      <div>
        <ul>
          <li>
            <img src="@/assets/img/icon.svg">
            <div>
              <span>TOK PRICE</span>
              <el-tooltip :hide-after="0" content="View Historical TOK Price" placement="bottom">
                <div>
                  <p>$11.10 @ <span>0.000167 BTC</span> <i>(-5.20%)</i></p>
                </div>
              </el-tooltip>
            </div>
          </li>
          <hr />
          <li>
            <img src="@/assets/img/icon1.svg">
            <div>
              <span>TOK MARKET CAP ON TOKCHAIN</span>
              <div>
                <p>$100,525,878.00 (9,052,895 TOK)</p>
              </div>
            </div>
          </li>
          <hr class="phone" />
        </ul>
      </div>
      <div>
        <ul>
          <li class="ups">
            <div>
              <img src="@/assets/img/icon2.svg">
              <div>
                <span>TRANSACTIONS</span>
                <div>
                  <p>
                    <el-tooltip :hide-after="0" content="Total Transactions Counter (Update every 5 mins)"
                      placement="bottom">
                      38.60 M
                    </el-tooltip>
                    <el-tooltip :hide-after="0" content="Transactions per Second" placement="bottom">
                      <span>(0.1 TPS)</span>
                    </el-tooltip>
                  </p>
                </div>
              </div>
            </div>

            <div>
              <span>MED GAS PRICE</span>
              <div>
                <p>3.39 Gwei <span>(＜ $0.01)</span></p>
              </div>
            </div>
          </li>
          <hr />
          <li>
            <img src="@/assets/img/icon3.svg">
            <div>
              <span>LATEST BLOCK</span>
              <div>
                <p>
                  <el-tooltip :hide-after="0" content="The latest Block No" placement="bottom">
                    7447270
                  </el-tooltip>
                  <el-tooltip :hide-after="0" content="Average Block Time (The latest 5000 blocks)" placement="bottom">
                    <span>(6.1s)</span>
                  </el-tooltip>
                </p>
              </div>
            </div>
          </li>
          <hr class="phone" />
        </ul>
      </div>
      <div>
        <div>
          <p>TOK CHAIN TRANSACTION HISTORY IN 14 DAYS</p>
          <EchartsView />
          <!-- <div></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tok_info {
  // height: 204px;
  margin-top: -3rem;

  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0;

    >div {
      flex: 1;

      >div {
        padding: 0 1rem;
        height: 100%;
        position: relative;

        p {
          color: #8F9399;
          font-size: 0.8rem;
        }
      }

      &:nth-child(2) {
        border-left: 1px solid;
        border-right: 1px solid;
        border-color: var(--color-border1);
        box-sizing: border-box;
      }


    }

    ul {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 1rem;

      hr {
        color: #e9ecef;
        border: 0;
        border-top: 1px solid;
        margin: 1rem;
      }

      li {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;

        img {
          width: 28px;
          height: auto;
          margin-right: 10px;
          // margin-bottom: 10px;
        }

        &:nth-child(1) {
          box-sizing: border-box;
        }

        span {
          color: #8F9399;
          font-size: 0.8rem;
        }

        i {
          color: #FF453A;
          font-size: 12px;
        }

        p {
          font-size: 0.95rem;
        }
      }

      .ups {
        justify-content: space-between;

        div {
          // text-align: right;

          &:nth-child(1) {
            display: flex;

            >div {
              text-align: left;
            }
          }

        }
      }
    }
  }
}

@media (max-width: 1000px) {
  .tok_info {
    height: auto;

    .row {
      >div {
        border: 0 !important;
        width: 100%;
        flex-direction: column;
        flex: auto;
      }

      ul li {
        // border-bottom: 1px solid #C6DAEA;
        // padding: 15px 0;
        width: 100%;
      }
    }
  }
}
</style>
